<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cangjie CEF 测试示例</title>
  <!-- 引入外部资源 -->
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/three@0.160.0/examples/js/controls/OrbitControls.js"></script>
  
  <!-- Tailwind 配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#36CFC9',
            success: '#52C41A',
            warning: '#FAAD14',
            danger: '#FF4D4F',
            dark: '#1D2129',
            'dark-2': '#4E5969',
            'light-1': '#F2F3F5',
            'light-2': '#E5E6EB',
            'light-3': '#C9CDD4',
          },
          fontFamily: {
            inter: ['Inter', 'system-ui', 'sans-serif'],
          },
          boxShadow: {
            'card': '0 4px 20px rgba(0, 0, 0, 0.08)',
            'card-hover': '0 8px 30px rgba(0, 0, 0, 0.12)',
          }
        },
      }
    }
  </script>
  
  <!-- 自定义工具类 -->
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .scrollbar-hide {
        scrollbar-width: none;
        -ms-overflow-style: none;
      }
      .scrollbar-hide::-webkit-scrollbar {
        display: none;
      }
      .animate-float {
        animation: float 3s ease-in-out infinite;
      }
      .animate-pulse-slow {
        animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
      }
    }
    
    @keyframes float {
      0%, 100% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-10px);
      }
    }
  </style>
</head>
<body class="font-inter bg-gray-50 text-dark  flex flex-col">
  <!-- 顶部导航栏 -->
  <header class="bg-white shadow-sm sticky top-0 z-50 transition-all duration-280 py-2" id="navbar">
    <div class="px-[30px] flex items-center justify-between">
      <div class="flex items-center space-x-1.5">
        <div class="bg-primary text-white p-1.5 rounded-lg">
          <i class="fa fa-cube"></i>
        </div>
        <h1 class="text-base font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">Cangjie CEF 测试平台</h1>
      </div>
      
      <nav class="hidden md:flex items-center space-x-6">
        <a href="#" class="text-primary font-medium text-sm border-b-2 border-primary pb-0.5">首页</a>
        <a href="#" class="text-dark-2 hover:text-primary transition-colors duration-200 text-sm">组件</a>
        <a href="#" class="text-dark-2 hover:text-primary transition-colors duration-200 text-sm">API</a>
        <a href="#" class="text-dark-2 hover:text-primary transition-colors duration-200 text-sm">文档</a>
        <a href="#" class="text-dark-2 hover:text-primary transition-colors duration-200 text-sm">测试报告</a>
      </nav>
      
      <div class="flex items-center space-x-4">
        <button class="text-dark-2 hover:text-primary transition-colors duration-200 relative">
          <i class="fa fa-search"></i>
        </button>
        <button class="text-dark-2 hover:text-primary transition-colors duration-200 relative">
          <i class="fa fa-bell"></i>
          <span class="absolute -top-1 -right-1 bg-danger text-white text-[10px] w-3 h-3 rounded-full flex items-center justify-center">3</span>
        </button>
        <button class="hidden md:flex items-center space-x-1.5 bg-light-1 hover:bg-light-2 transition-colors duration-200 rounded-full px-3 py-1">
          <img src="https://picsum.photos/200/200?random=1" alt="用户头像" class="w-6 h-6 rounded-full object-cover border-2 border-white shadow-sm">
          <span class="font-medium text-xs">开发者</span>
        </button>
        <button class="md:hidden text-dark-2 hover:text-primary transition-colors duration-200">
          <i class="fa fa-bars"></i>
        </button>
      </div>
    </div>
  </header>

  <!-- 主内容区 -->
  <main class="flex-grow px-[30px] py-6 overflow-hidden" style="padding-top: 10px; padding-bottom: 0px;">
    <!-- 页面标题和描述 -->
    <div class="mb-4 bg-gradient-to-r from-primary/5 to-secondary/5 rounded-2xl p-3">
      <h2 class="text-xl font-bold mb-1">Cangjie CEF 与 Three.js 集成演示</h2>
      <p class="text-dark-2  text-sm">展示 Cangjie CEF 环境中 Three.js 3D 渲染与现代 UI 设计的集成效果，支持实时性能监控与 3D 场景交互。 此页面及数据由AI生成，仅作展示，数据不具备参考意义。</p>
    </div>
    
    <!-- 状态概览 -->
    <div class="flex flex-wrap gap-3 mb-4">
      <div class="flex-1 min-w-[160px] bg-white rounded-xl shadow-card p-3 flex items-center">
        <div class="bg-primary/10 text-primary p-2 rounded-lg mr-3">
          <i class="fa fa-check-circle"></i>
        </div>
        <div>
          <p class="text-dark-2 text-xs">系统状态</p>
          <p class="font-bold text-sm">运行正常</p>
        </div>
        <div class="ml-auto">
          <span class="bg-success/10 text-success text-xs px-2 py-0.5 rounded-full">活跃</span>
        </div>
      </div>
      
      <div class="flex-1 min-w-[160px] bg-white rounded-xl shadow-card p-3 flex items-center">
        <div class="bg-warning/10 text-warning p-2 rounded-lg mr-3">
          <i class="fa fa-clock-o"></i>
        </div>
        <div>
          <p class="text-dark-2 text-xs">运行时间</p>
          <p class="font-bold text-sm">02:45:18</p>
        </div>
        <div class="ml-auto">
          <span class="bg-light-1 text-dark-2 text-xs px-2 py-0.5 rounded-full">持续中</span>
        </div>
      </div>
      
      <div class="flex-1 min-w-[160px] bg-white rounded-xl shadow-card p-3 flex items-center">
        <div class="bg-secondary/10 text-secondary p-2 rounded-lg mr-3">
          <i class="fa fa-tasks"></i>
        </div>
        <div>
          <p class="text-dark-2 text-xs">测试进度</p>
          <p class="font-bold text-sm">68%</p>
        </div>
        <div class="ml-auto">
          <div class="w-16 bg-light-2 rounded-full h-1.5">
            <div class="bg-secondary h-1.5 rounded-full" style="width: 68%"></div>
          </div>
        </div>
      </div>
      
      <div class="flex-1 min-w-[160px] bg-white rounded-xl shadow-card p-3 flex items-center">
        <div class="bg-danger/10 text-danger p-2 rounded-lg mr-3">
          <i class="fa fa-exclamation-triangle"></i>
        </div>
        <div>
          <p class="text-dark-2 text-xs">错误计数</p>
          <p class="font-bold text-sm">2 个警告</p>
        </div>
        <div class="ml-auto">
          <button class="text-dark-2 hover:text-primary text-xs transition-colors">查看</button>
        </div>
      </div>
    </div>
    
    <!-- 统计卡片 -->
    <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-3 mb-4">
      <div class="bg-white rounded-xl shadow-card hover:shadow-card-hover transition-all duration-300 p-3 transform hover:-translate-y-1">
        <div class="flex items-center justify-between mb-2">
          <h3 class="text-dark-2 font-medium text-xs">CPU 使用率</h3>
          <div class="bg-primary/10 text-primary p-1 rounded-lg">
            <i class="fa fa-microchip text-xs"></i>
          </div>
        </div>
        <div class="flex items-end justify-between">
          <div>
            <span class="text-base font-bold">24%</span>
            <span class="text-success text-xs ml-1"><i class="fa fa-arrow-down"></i> 3.2%</span>
          </div>
          <div class="w-10 h-10">
            <canvas id="cpuChart"></canvas>
          </div>
        </div>
      </div>
      
      <div class="bg-white rounded-xl shadow-card hover:shadow-card-hover transition-all duration-300 p-3 transform hover:-translate-y-1">
        <div class="flex items-center justify-between mb-2">
          <h3 class="text-dark-2 font-medium text-xs">内存占用</h3>
          <div class="bg-secondary/10 text-secondary p-1 rounded-lg">
            <i class="fa fa-memory text-xs"></i>
          </div>
        </div>
        <div class="flex items-end justify-between">
          <div>
            <span class="text-base font-bold">58%</span>
            <span class="text-danger text-xs ml-1"><i class="fa fa-arrow-up"></i> 5.7%</span>
          </div>
          <div class="w-10 h-10">
            <canvas id="memoryChart"></canvas>
          </div>
        </div>
      </div>
      
      <div class="bg-white rounded-xl shadow-card hover:shadow-card-hover transition-all duration-300 p-3 transform hover:-translate-y-1">
        <div class="flex items-center justify-between mb-2">
          <h3 class="text-dark-2 font-medium text-xs">帧率</h3>
          <div class="bg-success/10 text-success p-1 rounded-lg">
            <i class="fa fa-film text-xs"></i>
          </div>
        </div>
        <div class="flex items-end justify-between">
          <div>
            <span class="text-base font-bold">60 FPS</span>
            <span class="text-success text-xs ml-1"><i class="fa fa-check"></i> 稳定</span>
          </div>
          <div class="w-10 h-10">
            <canvas id="fpsChart"></canvas>
          </div>
        </div>
      </div>
      
      <div class="bg-white rounded-xl shadow-card hover:shadow-card-hover transition-all duration-300 p-3 transform hover:-translate-y-1">
        <div class="flex items-center justify-between mb-2">
          <h3 class="text-dark-2 font-medium text-xs">渲染时间</h3>
          <div class="bg-warning/10 text-warning p-1 rounded-lg">
            <i class="fa fa-clock-o text-xs"></i>
          </div>
        </div>
        <div class="flex items-end justify-between">
          <div>
            <span class="text-base font-bold">16 ms</span>
            <span class="text-success text-xs ml-1"><i class="fa fa-arrow-down"></i> 2.1 ms</span>
          </div>
          <div class="w-10 h-10">
            <canvas id="renderChart"></canvas>
          </div>
        </div>
      </div>
      
      <div class="bg-white rounded-xl shadow-card hover:shadow-card-hover transition-all duration-300 p-3 transform hover:-translate-y-1">
        <div class="flex items-center justify-between mb-2">
          <h3 class="text-dark-2 font-medium text-xs">GPU 使用率</h3>
          <div class="bg-purple-100 text-purple-600 p-1 rounded-lg">
            <i class="fa fa-picture-o text-xs"></i>
          </div>
        </div>
        <div class="flex items-end justify-between">
          <div>
            <span class="text-base font-bold">32%</span>
            <span class="text-danger text-xs ml-1"><i class="fa fa-arrow-up"></i> 1.5%</span>
          </div>
          <div class="w-10 h-10">
            <canvas id="gpuChart"></canvas>
          </div>
        </div>
      </div>
      
      <div class="bg-white rounded-xl shadow-card hover:shadow-card-hover transition-all duration-300 p-3 transform hover:-translate-y-1">
        <div class="flex items-center justify-between mb-2">
          <h3 class="text-dark-2 font-medium text-xs">网络流量</h3>
          <div class="bg-green-100 text-green-600 p-1 rounded-lg">
            <i class="fa fa-wifi text-xs"></i>
          </div>
        </div>
        <div class="flex items-end justify-between">
          <div>
            <span class="text-base font-bold">1.2 MB/s</span>
            <span class="text-success text-xs ml-1"><i class="fa fa-arrow-down"></i> 0.3 MB/s</span>
          </div>
          <div class="w-10 h-10">
            <canvas id="networkChart"></canvas>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 主要内容区域 -->
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-4 mb-4 flex-grow">
      <!-- 左侧面板 -->
      <div class="lg:col-span-8 space-y-4">
        <!-- Three.js 3D 渲染区域 -->
        <div class="bg-white rounded-xl shadow-card p-4">
          <div class="flex items-center justify-between mb-3">
            <h3 class="text-base font-bold">3D 渲染演示</h3>
            <div class="flex space-x-2">
              <button class="bg-light-1 hover:bg-light-2 text-dark-2 px-3 py-1 rounded-lg text-xs transition-colors duration-200 flex items-center">
                <i class="fa fa-object-group mr-1"></i> 模型库
              </button>
              <button class="bg-light-1 hover:bg-light-2 text-dark-2 px-3 py-1 rounded-lg text-xs transition-colors duration-200">
                <i class="fa fa-refresh mr-1"></i> 重置
              </button>
              <button class="bg-primary hover:bg-primary/90 text-white px-3 py-1 rounded-lg text-xs transition-colors duration-200">
                <i class="fa fa-download mr-1"></i> 导出
              </button>
            </div>
          </div>
          
          <!-- Three.js 容器 -->
          <div class="relative w-full h-[220px] bg-gray-100 rounded-lg overflow-hidden shadow-inner border border-light-2" id="threeContainer">
            <div class="absolute top-2 left-2 z-10 bg-dark/70 text-white text-xs px-2 py-1 rounded-lg backdrop-blur-sm">
              <i class="fa fa-info-circle mr-1"></i> 提示: 鼠标拖动可旋转视角
            </div>
            <div class="absolute inset-0 flex items-center justify-center bg-dark/50 z-10 opacity-0 pointer-events-none transition-opacity duration-300" id="loadingIndicator">
              <div class="text-white text-center">
                <div class="inline-block animate-spin rounded-full h-5 w-5 border-b-2 border-white mb-1"></div>
                <p class="text-xs">加载中...</p>
              </div>
            </div>
          </div>
          
          <!-- 控制器 -->
          <div class="mt-3 grid grid-cols-2 md:grid-cols-6 gap-3">
            <div>
              <label class="block text-xs font-medium text-dark-2 mb-0.5">旋转速度</label>
              <input type="range" min="0" max="10" value="3" class="w-full h-1.5 bg-light-2 rounded-lg appearance-none cursor-pointer accent-primary" id="rotationSpeed">
            </div>
            <div>
              <label class="block text-xs font-medium text-dark-2 mb-0.5">缩放级别</label>
              <input type="range" min="0.5" max="2" step="0.1" value="1" class="w-full h-1.5 bg-light-2 rounded-lg appearance-none cursor-pointer accent-primary" id="zoomLevel">
            </div>
            <div>
              <label class="block text-xs font-medium text-dark-2 mb-0.5">光源强度</label>
              <input type="range" min="0" max="2" step="0.1" value="1" class="w-full h-1.5 bg-light-2 rounded-lg appearance-none cursor-pointer accent-primary" id="lightIntensity">
            </div>
            <div>
              <label class="block text-xs font-medium text-dark-2 mb-0.5">环境光</label>
              <input type="range" min="0" max="1" step="0.1" value="0.5" class="w-full h-1.5 bg-light-2 rounded-lg appearance-none cursor-pointer accent-primary" id="ambientLight">
            </div>
            <div>
              <label class="block text-xs font-medium text-dark-2 mb-0.5">显示网格</label>
              <div class="mt-0.5 flex items-center">
                <input type="checkbox" id="showGrid" class="w-3 h-3 text-primary border-light-3 rounded focus:ring-primary" checked>
              </div>
            </div>
            <div>
              <label class="block text-xs font-medium text-dark-2 mb-0.5">抗锯齿</label>
              <div class="mt-0.5 flex items-center">
                <input type="checkbox" id="antiAlias" class="w-3 h-3 text-primary border-light-3 rounded focus:ring-primary" checked>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 性能监控 -->
        <div class="bg-white rounded-xl shadow-card p-4">
          <div class="flex items-center justify-between mb-3">
            <h3 class="text-base font-bold">性能监控</h3>
            <div class="flex space-x-1">
              <button class="bg-primary/10 hover:bg-primary/20 text-primary px-2 py-0.5 rounded-lg text-xs transition-colors duration-200">
                实时
              </button>
              <button class="bg-light-1 hover:bg-light-2 text-dark-2 px-2 py-0.5 rounded-lg text-xs transition-colors duration-200">
                <i class="fa fa-download mr-0.5"></i> 导出
              </button>
            </div>
          </div>
          
          <div class="w-full h-[160px]">
            <canvas id="performanceChart"></canvas>
          </div>
        </div>
      </div>
      
      <!-- 右侧面板 -->
      <div class="lg:col-span-4 space-y-4">
        <!-- 系统信息 -->
        <div class="bg-white rounded-xl shadow-card p-4">
          <h3 class="text-base font-bold mb-3">系统信息</h3>
          
          <div class="space-y-2">
            <div class="flex items-center justify-between pb-2 border-b border-light-2">
              <span class="text-dark-2 text-sm">CEF 版本</span>
              <span class="font-medium text-xs truncate max-w-[180px]">138.0.21+g54811fe+chromium-138.0.7204.101</span>
            </div>
            <div class="flex items-center justify-between pb-2 border-b border-light-2">
              <span class="text-dark-2 text-sm">Three.js 版本</span>
              <span class="font-medium text-sm">r160</span>
            </div>
            <div class="flex items-center justify-between pb-2 border-b border-light-2">
              <span class="text-dark-2 text-sm">操作系统</span>
              <span class="font-medium text-sm">Windows 10 专业版</span>
            </div>
            <div class="flex items-center justify-between pb-2 border-b border-light-2">
              <span class="text-dark-2 text-sm">处理器</span>
              <span class="font-medium text-xs truncate max-w-[180px]">Intel(R) Core(TM) i7-10700K</span>
            </div>
            <div class="flex items-center justify-between">
              <span class="text-dark-2 text-sm">显卡</span>
              <span class="font-medium text-sm">NVIDIA RTX 3080</span>
            </div>
          </div>
          
          <button class="w-full mt-3 bg-light-1 hover:bg-light-2 text-dark-2 py-1.5 rounded-lg text-xs font-medium transition-colors">
            <i class="fa fa-refresh mr-1"></i> 刷新系统信息
          </button>
        </div>
        
        <!-- 日志 -->
        <div class="bg-white rounded-xl shadow-card p-4">
          <div class="flex items-center justify-between mb-3">
            <h3 class="text-base font-bold">系统日志</h3>
            <div class="flex items-center">
              <span class="bg-success/10 text-success text-[10px] px-1 py-0.5 rounded-full mr-2">实时</span>
              <button class="text-dark-2 hover:text-primary text-xs transition-colors">
                <i class="fa fa-filter"></i>
              </button>
            </div>
          </div>
          
          <div class="h-[140px] overflow-y-auto scrollbar-hide bg-gray-50 rounded-lg p-2" id="logsContainer">
            <div class="space-y-2">
              <div class="flex items-start">
                <div class="w-5 h-5 flex items-center justify-center rounded-full bg-success/10 text-success mr-1.5">
                  <i class="fa fa-check text-[10px]"></i>
                </div>
                <div>
                  <p class="text-sm font-medium">Three.js 初始化成功</p>
                  <p class="text-[10px] text-dark-2">2025-07-16 10:23:45</p>
                </div>
              </div>
              <div class="flex items-start">
                <div class="w-5 h-5 flex items-center justify-center rounded-full bg-primary/10 text-primary mr-1.5">
                  <i class="fa fa-info text-[10px]"></i>
                </div>
                <div>
                  <p class="text-sm font-medium">加载 3D 模型资源</p>
                  <p class="text-[10px] text-dark-2">2025-07-16 10:23:42</p>
                </div>
              </div>
              <div class="flex items-start">
                <div class="w-5 h-5 flex items-center justify-center rounded-full bg-warning/10 text-warning mr-1.5">
                  <i class="fa fa-exclamation-triangle text-[10px]"></i>
                </div>
                <div>
                  <p class="text-sm font-medium">性能监控启动</p>
                  <p class="text-[10px] text-dark-2">2025-07-16 10:23:38</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 操作按钮 -->
        <div class="space-y-2">
          <button class="w-full bg-primary hover:bg-primary/90 text-white py-2 rounded-xl transition-all duration-300 shadow-md hover:shadow-lg flex items-center justify-center space-x-1 text-sm">
            <i class="fa fa-play-circle"></i>
            <span class="font-medium">开始测试</span>
          </button>
          <button class="w-full bg-warning hover:bg-warning/90 text-white py-2 rounded-xl transition-all duration-300 shadow-md hover:shadow-lg flex items-center justify-center space-x-1 text-sm">
            <i class="fa fa-stop-circle"></i>
            <span class="font-medium">停止测试</span>
          </button>
          <!-- <button class="w-full bg-white hover:bg-gray-50 text-dark border border-light-2 py-2 rounded-xl transition-all duration-300 flex items-center justify-center space-x-1 text-sm">
            <i class="fa fa-file-text-o"></i>
            <span class="font-medium">生成报告</span>
          </button> -->
        </div>
      </div>
    </div>
  </main>

  <!-- 页脚 -->
  <footer class="bg-white border-t border-light-2 py-3">
    <div class="px-[30px] flex flex-col md:flex-row justify-between items-center">
      <div class="text-dark-2 text-xs mb-2 md:mb-0">
        © 2025 Cangjie CEF 测试平台 | 版本 0.0.1 | 最后更新: 2025-07-16
      </div>
      <div class="flex flex-wrap justify-center gap-x-4 gap-y-1">
        <a href="#" class="text-dark-2 hover:text-primary transition-colors duration-200 text-xs">隐私政策</a>
        <a href="#" class="text-dark-2 hover:text-primary transition-colors duration-200 text-xs">使用条款</a>
        <a href="#" class="text-dark-2 hover:text-primary transition-colors duration-200 text-xs">联系我们</a>
        <a href="#" class="text-dark-2 hover:text-primary transition-colors duration-200 text-xs">关于项目</a>
      </div>
    </div>
  </footer>

  <!-- JavaScript -->
  <script>
    // 导航栏滚动效果
    const navbar = document.getElementById('navbar');
    window.addEventListener('scroll', () => {
      if (window.scrollY > 10) {
        navbar.classList.add('shadow-md');
      } else {
        navbar.classList.remove('shadow-md');
      }
    });
    
    // 初始化小型图表
    function initSmallChart(ctx, value, color) {
      return new Chart(ctx, {
        type: 'doughnut',
        data: {
          datasets: [{
            data: [value, 100 - value],
            backgroundColor: [
              color,
              '#F2F3F5'
            ],
            borderWidth: 0
          }]
        },
        options: {
          cutout: '70%',
          responsive: true,
          maintainAspectRatio: true,
          plugins: {
            legend: {
              display: false
            },
            tooltip: {
              enabled: false
            }
          }
        }
      });
    }
    
    // 初始化各小型图表
    initSmallChart(document.getElementById('cpuChart').getContext('2d'), 24, '#165DFF');
    initSmallChart(document.getElementById('memoryChart').getContext('2d'), 58, '#36CFC9');
    initSmallChart(document.getElementById('fpsChart').getContext('2d'), 90, '#52C41A');
    initSmallChart(document.getElementById('renderChart').getContext('2d'), 16, '#FAAD14');
    initSmallChart(document.getElementById('gpuChart').getContext('2d'), 32, '#722ed1');
    initSmallChart(document.getElementById('networkChart').getContext('2d'), 40, '#52c41a');
    
    // 初始化性能图表
    const performanceCtx = document.getElementById('performanceChart').getContext('2d');
    const performanceChart = new Chart(performanceCtx, {
      type: 'line',
      data: {
        labels: ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00'],
        datasets: [
          {
            label: 'CPU 使用率 (%)',
            data: [25, 30, 28, 35, 40, 32, 24, 20],
            borderColor: '#165DFF',
            backgroundColor: 'rgba(22, 93, 255, 0.1)',
            tension: 0.4,
            fill: true,
            pointRadius: 1.5,
            borderWidth: 1.2,
            pointBackgroundColor: '#165DFF'
          },
          {
            label: '内存占用 (%)',
            data: [45, 50, 55, 60, 65, 58, 55, 50],
            borderColor: '#36CFC9',
            backgroundColor: 'rgba(54, 207, 201, 0.1)',
            tension: 0.4,
            fill: true,
            pointRadius: 1.5,
            borderWidth: 1.2,
            pointBackgroundColor: '#36CFC9'
          }
        ]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
          y: {
            beginAtZero: true,
            max: 100,
            grid: {
              color: 'rgba(0, 0, 0, 0.05)',
              lineWidth: 0.5
            },
            ticks: {
              font: {
                size: 9
              },
              stepSize: 20
            }
          },
          x: {
            grid: {
              display: false
            },
            ticks: {
              font: {
                size: 9
              }
            }
          }
        },
        plugins: {
          legend: {
            position: 'top',
            align: 'end',
            labels: {
              usePointStyle: true,
              boxWidth: 4,
              font: {
                size: 9
              }
            }
          }
        }
      }
    });
    
    // Three.js 初始化
    let scene, camera, renderer, cube, controls, gridHelper, axesHelper, ambientLight, directionalLight;
    let rotationSpeed = 0.01;
    let lightIntensity = 1;
    
    // 显示加载指示器
    const loadingIndicator = document.getElementById('loadingIndicator');
    loadingIndicator.style.opacity = '1';
    loadingIndicator.style.pointerEvents = 'auto';
    
    function initThreeJS() {
      // 获取容器元素
      const container = document.getElementById('threeContainer');
      
      // 创建场景
      scene = new THREE.Scene();
      scene.background = new THREE.Color(0xf2f3f5);
      
      // 创建相机
      camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000);
      camera.position.set(5, 3, 5);
      camera.lookAt(0, 0, 0);
      
      // 创建渲染器
      renderer = new THREE.WebGLRenderer({ 
        antialias: document.getElementById('antiAlias').checked 
      });
      renderer.setSize(container.clientWidth, container.clientHeight);
      renderer.setPixelRatio(window.devicePixelRatio);
      
      // 添加渲染器DOM
      while (container.firstChild) {
        if (container.firstChild.id !== 'loadingIndicator') {
          container.removeChild(container.firstChild);
        } else {
          break;
        }
      }
      container.appendChild(renderer.domElement);
      
      // 添加环境光
      ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
      scene.add(ambientLight);
      
      // 添加方向光
      directionalLight = new THREE.DirectionalLight(0xffffff, lightIntensity);
      directionalLight.position.set(5, 5, 5);
      scene.add(directionalLight);
      
      // 添加辅助光源
      const helperLight = new THREE.DirectionalLightHelper(directionalLight, 1);
      scene.add(helperLight);
      
      // 添加网格助手
      gridHelper = new THREE.GridHelper(30, 30, 0xc9cdd4, 0xe5e6eb);
      gridHelper.position.y = -1;
      scene.add(gridHelper);
      
      // 添加三维坐标系
      axesHelper = new THREE.AxesHelper(5);
      scene.add(axesHelper);
      
      // 创建彩色立方体
      const geometry = new THREE.BoxGeometry(2, 2, 2);
      const materials = [
        new THREE.MeshStandardMaterial({ color: 0xff5252 }),
        new THREE.MeshStandardMaterial({ color: 0x52c41a }),
        new THREE.MeshStandardMaterial({ color: 0x165dff }),
        new THREE.MeshStandardMaterial({ color: 0xfaad14 }),
        new THREE.MeshStandardMaterial({ color: 0x722ed1 }),
        new THREE.MeshStandardMaterial({ color: 0xeb4d90 })
      ];
      
      cube = new THREE.Mesh(geometry, materials);
      scene.add(cube);
      
      // 添加控制器
      if (typeof THREE.OrbitControls !== 'undefined') {
        controls = new THREE.OrbitControls(camera, renderer.domElement);
        controls.enableDamping = true;
        controls.dampingFactor = 0.1;
      } else {
        console.error('OrbitControls not loaded properly');
        addLog('error', '无法加载 OrbitControls，3D 交互功能将受限');
      }
      
      // 隐藏加载指示器
      setTimeout(() => {
        loadingIndicator.style.opacity = '0';
        loadingIndicator.style.pointerEvents = 'none';
      }, 1000);
      
      // 监听窗口大小变化
      window.addEventListener('resize', onWindowResize);
      
      // 添加控制器事件监听
      document.getElementById('rotationSpeed').addEventListener('input', (e) => {
        rotationSpeed = parseFloat(e.target.value) * 0.01;
      });
      
      document.getElementById('zoomLevel').addEventListener('input', (e) => {
        const zoom = parseFloat(e.target.value);
        camera.position.set(5/zoom, 3/zoom, 5/zoom);
        camera.lookAt(0, 0, 0);
      });
      
      document.getElementById('lightIntensity').addEventListener('input', (e) => {
        lightIntensity = parseFloat(e.target.value);
        directionalLight.intensity = lightIntensity;
      });
      
      document.getElementById('ambientLight').addEventListener('input', (e) => {
        ambientLight.intensity = parseFloat(e.target.value);
      });
      
      document.getElementById('showGrid').addEventListener('change', (e) => {
        gridHelper.visible = e.target.checked;
        axesHelper.visible = e.target.checked;
      });
      
      document.getElementById('antiAlias').addEventListener('change', (e) => {
        addLog('info', `抗锯齿已${e.target.checked ? '启用' : '禁用'}，需刷新页面生效`);
      });
      
      // 开始动画循环
      animate();
    }
    
    function onWindowResize() {
      if (!renderer || !document.getElementById('threeContainer')) return;
      
      const container = document.getElementById('threeContainer');
      camera.aspect = container.clientWidth / container.clientHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(container.clientWidth, container.clientHeight);
    }
    
    function animate() {
      requestAnimationFrame(animate);
      
      // 自动旋转
      if (cube) {
        cube.rotation.x += rotationSpeed;
        cube.rotation.y += rotationSpeed;
      }
      
      if (controls) {
        controls.update();
      }
      
      if (renderer) {
        renderer.render(scene, camera);
      }
    }
    
    // 等待DOM加载完成后初始化Three.js
    document.addEventListener('DOMContentLoaded', initThreeJS);
    
    // 日志添加功能
    function addLog(type, message) {
      const logsContainer = document.getElementById('logsContainer');
      const logEntry = document.createElement('div');
      logEntry.className = 'flex items-start';
      
      let icon, bgClass, textClass;
      
      switch(type) {
        case 'success':
          icon = 'check';
          bgClass = 'bg-success/10';
          textClass = 'text-success';
          break;
        case 'info':
          icon = 'info';
          bgClass = 'bg-primary/10';
          textClass = 'text-primary';
          break;
        case 'warning':
          icon = 'exclamation-triangle';
          bgClass = 'bg-warning/10';
          textClass = 'text-warning';
          break;
        case 'error':
          icon = 'times';
          bgClass = 'bg-danger/10';
          textClass = 'text-danger';
          break;
      }
      
      logEntry.innerHTML = `
        <div class="w-5 h-5 flex items-center justify-center rounded-full ${bgClass} ${textClass} mr-1.5">
          <i class="fa fa-${icon} text-[10px]"></i>
        </div>
        <div>
          <p class="text-sm font-medium">${message}</p>
          <p class="text-[10px] text-dark-2">${new Date().toLocaleString()}</p>
        </div>
      `;
      
      logsContainer.insertBefore(logEntry, logsContainer.firstChild);
      
      // 限制日志数量
      if (logsContainer.children.length > 5) {
        logsContainer.removeChild(logsContainer.lastChild);
      }
    }
    
    // 定时添加模拟日志
    setInterval(() => {
      const messages = [
        { type: 'info', message: '性能数据更新完成' },
        { type: 'success', message: '3D 渲染帧完成' },
        { type: 'info', message: '用户界面交互正常' },
        { type: 'warning', message: 'GPU 温度略高 (65°C)' },
        { type: 'info', message: '内存使用优化完成' }
      ];
      
      const randomMessage = messages[Math.floor(Math.random() * messages.length)];
      addLog(randomMessage.type, randomMessage.message);
    }, 5000);
  </script>
</body>
</html>